<!DOCTYPE html>
<html lang="en">
<head>
	<title>Calendar - Animation</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />

	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />

	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<link href="../../themes/wijmo/jquery.wijmo.wijcalendar.css" rel="stylesheet" type="text/css" />
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijpopup.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijcalendar.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function () {
			$("#calendar1").wijcalendar();

			$('#direction').bind("change keyup", function () {
				$("#calendar1").wijcalendar("option", { direction: $(this).val() });
			});

			$('#duration').bind("blur", function () {
				try {
					var duration = parseInt($(this).val());
					if (duration < 0) {
						alert("Invalid duration");
					} else {
						$("#calendar1").wijcalendar("option", { duration: duration });
					}
				} catch (e) {
				}
			});

			$('#easing').bind("change keyup", function () {
				$("#calendar1").wijcalendar("option", { easing: $(this).val() });
			});


		});

	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Animation</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="calendar1">
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<div class="option-row">
					<label for="direction">
						Direction</label>
					<select name="direction" id="direction">
						<option value="horizontal" selected="selected">Horizontal</option>
						<option value="vertical">Vertical</option>
					</select>
				</div>
				<div class="option-row">
					<label for="easing">
						Easing</label>
					<select name="easing" id="easing">
						<option value="jswing">jswing</option>
						<option value="def">def</option>
						<option value="easeInQuad" selected="selected">easeInQuad</option>
						<option value="easeOutQuad">easeOutQuad</option>
						<option value="easeInOutQuad">easeInOutQuad</option>
						<option value="easeInCubic">easeInCubic</option>
						<option value="easeOutCubic">easeOutCubic</option>
						<option value="easeInOutCubic">easeInOutCubic</option>
						<option value="easeInQuart">easeInQuart</option>
						<option value="easeOutQuart">easeOutQuart</option>
						<option value="easeInOutQuart">easeInOutQuart</option>
						<option value="easeInQuint">easeInQuint</option>
						<option value="easeOutQuint">easeOutQuint</option>
						<option value="easeInOutQuint">easeInOutQuint</option>
						<option value="easeInSine">easeInSine</option>
						<option value="easeOutSine">easeOutSine</option>
						<option value="easeInOutSine">easeInOutSine</option>
						<option value="easeInExpo">easeInExpo</option>
						<option value="easeOutExpo">easeOutExpo</option>
						<option value="easeInOutExpo">easeInOutExpo</option>
						<option value="easeInCirc">easeInCirc</option>
						<option value="easeOutCirc">easeOutCirc</option>
						<option value="easeInOutCirc">easeInOutCirc</option>
						<option value="easeInElastic">easeInElastic</option>
						<option value="easeOutElastic">easeOutElastic</option>
						<option value="easeInOutElastic">easeInOutElastic</option>
						<option value="easeInBack">easeInBack</option>
						<option value="easeOutBack">easeOutBack</option>
						<option value="easeInOutBack">easeInOutBack</option>
						<option value="easeInBounce">easeInBounce</option>
						<option value="easeOutBounce">easeOutBounce</option>
						<option value="easeInOutBounce">easeInOutBounce</option>
					</select>
				</div>
				<div class="option-row">
					<label for="duration">
						Duration</label>
					<input name="x" type="text" id="duration" style="width: 40px;" value="250" />
				</div>
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>
				This sample illustrates how to set the animation effects using the duration and easing options.
			</p>
		</div>
	</div>
</body>
</html>
